<template>
  <view class="conversion">
    <!-- 简体转繁体 -->
    <view class="conversion-JT" v-if="switching">
      <!-- 内容 -->
      <view class="conversion-JT-content">
        <view>
          <view>简体内容：</view>
        </view>
        <uni-easyinput
          type="textarea"
          ref="conJToF"
          v-model="beforeTextToF"
          :trim="true"
          autoHeight
          placeholder="请在此输入简体的内容"
          @input="handleChange"
        ></uni-easyinput>
      </view>
      <view class="conversion-JT-content">
        <view class="content">
          <view>繁体内容：</view>
        </view>
        <uni-easyinput
          type="textarea"
          v-model="afterTextToF"
          :disabled="!afterTextToF"
          placeholder="转换后的内容会在这里显示"
        ></uni-easyinput>
      </view>
      <!-- 按钮 -->
      <view class="conversion-JT-btn">
        <van-button
          round
          type="primary"
          class="btn"
          size="small"
          @click="handelConversionToF"
        >
          确认
        </van-button>
        <van-button round type="info" size="small" @click="handleSwitching">
          切换为繁体
        </van-button>
      </view>
    </view>
    <!-- 繁体转简体 -->
    <view class="conversion-FT" v-else>
      <!-- 内容 -->
      <view class="conversion-FT-content">
        <view>
          <view>繁体内容：</view>
        </view>
        <uni-easyinput
          type="textarea"
          ref="conFToJ"
          v-model="beforeTextToJ"
          :trim="true"
          autoHeight
          placeholder="请在此输入繁体的内容"
          @input="handleChange"
        ></uni-easyinput>
      </view>
      <view class="conversion-FT-content">
        <view class="content">
          <view>简体内容：</view>
        </view>
        <uni-easyinput
          type="textarea"
          v-model="afterTextToJ"
          :disabled="!afterTextToJ"
          placeholder="转换后的内容会在这里显示"
        ></uni-easyinput>
      </view>
      <!-- 按钮 -->
      <view class="conversion-FT-btn">
        <van-button
          round
          type="primary"
          class="btn"
          size="small"
          @click="handelConversionToJ"
        >
          确认
        </van-button>
        <van-button round type="info" size="small" @click="handleSwitching">
          切换为简体
        </van-button>
      </view>
    </view>
  </view>
</template>

<script>
import FlyIO from 'flyio/dist/npm/wx'
import  mixin  from "@/mixins/mixins"
// 创建新的 FlyIO 实例 请求头和其他不一样 单独设置
const http = new FlyIO()
http.config.headers = {
  'X-APISpace-Token': 'aug5rcbg3vgyusnreb3qavhd1t3ewevb',
  'Authorization-Type': 'apikey',
  'Content-Type': 'application/x-www-form-urlencoded'
}
export default {
  name: 'Conversion',
  mixins:[mixin],
  data() {
    return {
      beforeTextToF: '', // 转换前为简体
      beforeTextToJ: '', // 转换前为繁体
      type: '', // 转换类型
      afterTextToF: '', // 转换后为繁体
      afterTextToJ: '', // 转换后为简体
      switching: true
    }
  },
  methods: {
    // 简转繁
    async handelConversionToF() {
      this.type = 'zh-tw' // zh-tw 台灣正體 zh-cn 大陆简体 zh-hk 香港繁體 zh-sg 马新简体 zh-hans 简体 zh-hant 繁體
      if (!this.beforeTextToF) {
        this.$refs.conJToF.focus = true
        return this.$msg('请输入需要转换的文本')
      }
      const data = {
        text: this.beforeTextToF,
        lang256: this.type
      }
      const { data: res } = await http.post(
        'https://eolink.o.apispace.com/jyzwjfzh/api/v1/forward/zhopenvi/',
        data
      )
      // console.log(res)
      if (res.code === 200) {
        this.afterTextToF = res.data
      } else {
        this.$msg(e.msg_zh + '请稍后重试')
      }
    },
    // 繁转简
    async handelConversionToJ() {
      this.type = 'zh-cn'
      if (!this.beforeTextToJ) {
        this.$refs.conFToJ.focus = true
        return this.$msg('请输入需要转换的文本')
      }
      const data = {
        text: this.beforeTextToJ,
        lang256: this.type
      }
      const { data: res } = await http.post(
        'https://eolink.o.apispace.com/jyzwjfzh/api/v1/forward/zhopenvi/',
        data
      )
      if (res.code === 200) {
        this.afterTextToJ = res.data
      } else {
        this.$msg(e.msg_zh + '请稍后重试')
      }
    },
    // 简繁切换
    handleSwitching() {
      this.switching = !this.switching
      // 重置状态
      this.beforeTextToF = ''
      this.beforeTextToJ = ''
      this.afterTextToF = ''
      this.afterTextToJ = ''
    },
    // 最大输入字数校验
    handleChange() {
      // console.log(this.beforeTextToF.length)
      if (
        this.beforeTextToF.length >= 140 ||
        this.beforeTextToJ.length >= 140
      ) {
        this.$msg('最大输入140个字符')
      }
    },

  }
}
</script>

<style lang="scss" scoped>
.conversion {
  .conversion-JT {
    &-content {
      display: flex;
      margin-top: 40rpx;
    }
    &-btn {
      margin-left: 35%;
      margin-top: 20rpx;
      padding-bottom: 30rpx;
      .btn {
        margin-right: 30rpx;
      }
    }
  }
  .conversion-FT {
    &-content {
      display: flex;
      margin-top: 40rpx;
    }
    &-btn {
      margin-left: 35%;
      margin-top: 20rpx;
      padding-bottom: 30rpx;
      .btn {
        margin-right: 30rpx;
      }
    }
  }
}
</style>
